<template>
    <el-main style="background-color: rgb(240,243,243);height:100%;">
        <div class="mainDiv">
            <div class="rowHead">
                <el-date-picker class="w300" v-model="times" type="daterange" placeholder="选择日期范围（默认当天日期）" :picker-options="timeArea" @change="getUserPay(userid)">
                </el-date-picker>              
            </div>
            <div style="display: flex; flex: 1; justify-content: space-between;">
                <div class="pl0" style="width: 33%; height: 100%;">        
                    <el-table :data="userPay" id="leftTable" height="100%">                      
                        <el-table-column prop="type" label="工资类型"></el-table-column>
                        <el-table-column prop="number" label="具体数据"></el-table-column>         
                    </el-table>         
                </div>
                <div class="pr0" style="width: 66%; height: 100%;">
                    <el-table :data="mlist" style="width: 100%;" height="100%">
                        <el-table-column prop="type" label="组成类型">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.type == 1">底薪</el-tag>
                                <el-tag type="gray" v-if="scope.row.type == 2">提成</el-tag>
                                <el-tag type="primary" v-if="scope.row.type == 3">指标</el-tag>
                                <el-tag type="success" v-if="scope.row.type == 4">奖金</el-tag>
                                <el-tag type="warning" v-if="scope.row.type == 5">补贴</el-tag>
                                <el-tag type="danger" v-if="scope.row.type == 6">扣除</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="childtype" label="细类">
                            <template slot-scope="scope">
                                <el-tag type="primary">{{scope.row.childtypename}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="money" label="金额" width="60">
                        </el-table-column>
                        <el-table-column prop="remarks" label="描述">
                        </el-table-column>
                        <el-table-column prop="time" label="工资日期">
                            <template slot-scope="scope">
                                {{time(scope.row.time)}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="addtime" label="添加时间">
                            <template slot-scope="scope">
                                {{time(scope.row.addtime)}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderid" label="关联订单">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="h-chakan" size="small" @click="chakan(scope.row)" v-if="scope.row.orderid != 0">查看</el-button>
                            </template>
                        </el-table-column>                        
                    </el-table>
                </div>
            </div>                    
        </div>
    </el-main> 
</template>
<script>
import C from '@/common/common.js'
import P from '@/service/shop/popup.js'

export default {
  name: 'featList',
  data () {
    return {
      userid: '',
      mlist: [],
      userPay: [],
      times: [new Date(), new Date()],
      timeArea: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, td])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, td])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, td])
          }
        }]
      },
      typelist: [
        [{ name: '职称底薪', id: 1 }, { name: '责任底薪', id: 2 }],
        [
          { name: '销售提成', id: 1, disabled: true },
          { name: '手工提成', id: 2, disabled: true },
          { name: '卡耗提成', id: 3, disabled: true },
          { name: '其他提成', id: 4 },
          { name: '现金阶梯', id: 5, disabled: true },
          { name: '卡耗阶梯', id: 6, disabled: true }
        ],
        [{ name: '销售指标', id: 1 }, { name: '卡耗指标', id: 2 }, { name: '手工指标', id: 3 }, { name: '客次指标', id: 4 }, { name: '其他指标', id: 5 }],
        [{ name: '全勤奖金', id: 1 }, { name: '利润奖金', id: 2 }, { name: '其他奖金', id: 3 }],
        [{ name: '工龄补贴', id: 1 }, { name: '社保补贴', id: 2 }, { name: '其他补贴', id: 3 }],
        [{ name: '缺勤扣除', id: 1 }, { name: '请假扣除', id: 2 }, { name: '其他扣除', id: 3 }]
      ]
    }
  },
  created () {
    let that = this
    that.userid = that.$route.params.userid
    that.getUserPay(that.userid)
  },
  methods: {

    time: function (unix) {
      return C.time(unix)
    },

    getUserPayDetail: async function (userid) {
      let that = this
      let ydata = {
        userid: userid,
        time: JSON.stringify(that.times)
      }
      if (!that.times) {
        ydata.time = JSON.stringify([new Date(), new Date()])
      }
      let res = await C.ajax('/shop/userpay/getpay', ydata, 'post')
      if (res) {
        let newdata = []
        res.forEach((row) => {
          newdata.push({
            id: row.id,
            userid: row.userid,
            orderid: row.orderid,
            ordertype: row.ordertype,
            type: row.category,
            childtype: row.type,
            childtypename: that.gettypename(row.category, row.type),
            money: row.money,
            remarks: row.remarks,
            time: row.time,
            addtime: row.addtime
          })
        })
        that.mlist = newdata
      }
    },

    chakan: async function (row) {
      let obj = { id: row.orderid, status: 2, ordertype: row.ordertype }
      await P.showOrderPopup(obj)
    },

    getUserPay: async function (userid) {
      let that = this
      let times = that.times
      let res = await C.ajax('/shop/userpay/getoneuserpay', { times: JSON.stringify(times), userid: userid }, 'post')
      let data = res[0]
      console.log(res)
      let finallyData = [{type: '现金提成', number: data.xjtc}, {type: '卡耗提成', number: data.khtc}, {type: '手工提成', number: data.sgtc}, {type: ' 其他提成', number: data.qttc}, {type: ' 现金阶梯', number: data.xjjt}, {type: ' 卡耗阶梯', number: data.khjt}, {type: '---提成合计', number: data.ticheng}, {type: '---底薪', number: data.dixin}, {type: '---指标', number: data.zhibiao}, {type: '---奖金', number: data.jiangjin}, {type: '---补贴', number: data.butie}, {type: '---扣除', number: data.kouchu}, {type: '总计', number: data.zongji}]
      that.userPay = finallyData
      that.getUserPayDetail(userid)
    },

    gettypename: function (type, childtype) {
      return this.typelist[type - 1][childtype - 1].name
    }
  }
}
</script>

<style>
    .flex_spcb{
        display:flex;
        justify-content: space-between;
    }
    #leftTable .el-table__body-wrapper{
        overflow-y: auto;
    }
    #leftTable .el-table__body tr>td{
      background-color: transparent !important;
    }
    #leftTable .el-table__body tr:hover>td{
      background-color: transparent !important;
    }
    .rowHead{
        padding: 10px;
        background-color: #fff;
        margin: 0px 0px 10px 0px !important;
    }         
    .groupHead span,.groupBody span{
        width: 33.33%;
        text-align: center;
    }
    .groupBody{
        padding: 5px 0;
    }
    .groupBody:hover{
        background-color: #FAFAFA;
        transition: background-color .25s ease;
        cursor: pointer;
    }    
</style>